<template>
  <div v-loading="loading">
    <div style="margin-top: -10px;margin-left:20px;font-size: 10px">此排行每日12:30刷新</div>
    <div v-for="(item,index) in gambitData" :key="item.index" class="hotFor">
       <div style="margin-top: 30px">
         <div class="hotFor-index">
           <div v-if="index+1 <= 3" style="color: #ff0048">{{ index+1 }}</div>
           <div v-else >{{ index+1 }}</div>
         </div>
         <div class="hotFor-title-content">
           <div>
             <div style="display: inline-block;width: 330px;height: 80px;">
               <div class="titleDiv" @click="articleTitle(item.articleId)">
                 <h4>{{ item.articleTitle }}</h4>
               </div>
               <br>
               <br>
               <div style="font-size: 10px">
                 <div class="el-icon-user" />{{ item.users.usersName}}
                 <div class="el-icon-timer" /><TimeDisposal :date="item.articleCreatingTime"/>
                 <div class="el-icon-chat-round" />{{ item.commentSize }}
               </div>
             </div>
             <el-image :src="item.articleFirstImage" style="display: inline-block;width: 150px;height: 90px;margin-left: 100px" />
           </div>
         </div>
         <el-divider />
       </div>
    </div>
  </div>
</template>

<script>
import request from "../../../utils/request";
import TimeDisposal from "../../../components/timeDisposal";
import {gotoNewWindow} from "../../../utils/sameMethod";
export default {
  name: "hotList",
  components:{TimeDisposal},
  data:function (){
    return{
      gambitData:[],
      loading:false
    }
  },
  methods:{
    articleTitle(articleId){
      gotoNewWindow(articleId,"content","detail");
    },
    initArticleComment(){
      this.loading=true
      request.get('/article/initArticleCommentList').then( res => {
        this.gambitData=res.data[0]
        this.loading=false;
      })
    }
  },
  mounted() {
    this.initArticleComment()
  }
}
</script>

<style scoped>
.hotFor{
  margin-top: -20px;
}
.hotFor-index{
  margin-top: 40px;
  height: 100%;
  width: 10%;
  float: left;
  text-align: center;
}
.hotFor-title-content{
  display: inline;
}
</style>